<template>
  <!-- 提现明细 -->
  <div class="app-container">
    <el-form class="search-form-new" :model="queryParams" ref="queryForm" :inline="true">
      <div class="search-box">
        <el-form-item label="提现状态" prop="state">
          <el-select clearable v-model="queryParams.state" placeholder="请选择提现状态"  @change="handleQuery">
            <el-option v-for="(value,key) in commonMaps.tixianStateMap" :key="key" :label="value.label" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="">
          <el-date-picker style="width: 220px" v-model="timer" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="handleQuery">
          </el-date-picker>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置/刷新</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div class="table_box">
      <el-table :data="tableData.records" style="width: 100%">
        <el-table-column prop="applicantName" label="申请人" ></el-table-column>
        <!-- <el-table-column prop="applicantTel" label="联系电话" ></el-table-column> -->
        <el-table-column prop="createTime" label="申请时间" ></el-table-column>
        <el-table-column prop="createTime" label="账户类型" >
          <template slot-scope="scope">
            <span>{{
                  commonMaps.accountType[scope.row.accountType] || commonMaps.accountType["1"]
                }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="applicantRealName" label="账户名称" ></el-table-column>
        <el-table-column prop="account" label="账号" >
          <template slot-scope="scope">
            <span>{{scope.row.account}} </span>
            <!-- <div style="color:red" v-show="scope.row.isCheck==1">该账号是首次提现或与上次提现不一致，请核对后再打款！</div> -->
          </template>
        </el-table-column>
        <!-- <el-table-column prop="type" label="提现类型" >
          <template slot-scope="scope">
            <span v-show="scope.row.type==1">余额提现 </span>
            <span v-show="scope.row.type==2">保证金提现</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="applicantAmount" label="申请金额">
        </el-table-column>
        <el-table-column prop="fee" label="手续费">
        </el-table-column>
        <el-table-column prop="amount" label="到账金额">
        </el-table-column>
        <el-table-column prop="state" label="提现状态">
          <template slot-scope="scope">
            <el-tag :type="commonMaps.tixianStateMap[scope.row.state].type">{{
                commonMaps.tixianStateMap[scope.row.state].label
              }}</el-tag>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: right;">
    <pagination v-if="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
  </div>
</template>
<script>
import myMoneyApi from "@/api/financeCenter/myMoney.js";
export default {
  name: "",
  data() {
    return {
      timer: [],
      tableData: {
        records: [],
      },
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        operatorTimeStart: "",
        operatorTimeEnd: "",
        dataType: "one",
        changeType: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      // queryParams 请求列表
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.applicantTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.applicantTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.applicantTimeStart = "";
        this.queryParams.applicantTimeEnd = "";
      }
      myMoneyApi.withdrawalRecordList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.total = res.total;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.timer = [];
      this.handleQuery();
    },
    resetQuery() {
      this.timer = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        operatorTimeStart: "",
        operatorTimeEnd: "",
        dataType: "one",
        changeType: "",
      };
      this.getList();
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .search-box {
    // width: 790px;
    // margin: 0 auto;
  }
}
</style>
